<template>
    <div class="pagination">
        <el-pagination
            :class="{ 'custom-pagination' : _transparent }"
            v-model:current-page="_currentPage"
            v-model:page-size="_pageSize"
            :size="'default'"
            :disabled="false"
            :background="_background"
            layout="total,prev, pager, next, jumper"
            :total="_total"
            @size-change="sizeChange"
            @current-change="currentChange"
        />
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, watch } from 'vue'
export default defineComponent({
  name: 'pagination'
});
export interface PageResult<T> {
    list: T[],
    pageNum: number,
    pageSize: number,
    total: number,
}
</script>
<script setup lang="ts">
    // 获取 props 参数
    const props = withDefaults(defineProps<{
        total: number;         // 数据总条数
        currentPage?: number;    // 当前页码
        pageSize?: number;       // 每页显示条数
        background?: boolean;   // 是否显示背景色
        transparent?: boolean;  // 是否透明背景
    }>(), {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        background: false,
        transparent: true
    });

    // 定义事件
    const emit = defineEmits<{
        // 获取当前页内容
        (e: 'updateData', courrentPage: number, pageSize: number): void;
    }>();

    const update = ref(true);

    const _background = ref(props.background);

    const _transparent = ref(props.transparent);

    const _currentPage = ref(props.currentPage);

    const _pageSize = ref(props.pageSize);

    const _total = ref(props.total);

    // 监听 props.currentPage 和 props.pageSize 的变化，确保子组件中的数据与父组件同步
    watch(() => props.currentPage, (newVal) => {
        _currentPage.value = newVal;
        if (!update.value) return; // 停止调用 updateData 事件
        // 获取当前页数据
        emit('updateData', _currentPage.value, _pageSize.value);
    });
    watch(() => props.pageSize, (newVal) => {
        _pageSize.value = newVal;
        if (!update.value) return; // 停止调用 updateData 事件
        // 获取当前页数据
        emit('updateData', _currentPage.value, _pageSize.value);
    });

    // 监听 props.background 和 props.transparent 的变化，确保子组件中的数据与父组件同步
    watch(() => props.background, (newVal) => {
        _background.value = newVal;
    });
    watch(() => props.transparent, (newVal) => {
        _transparent.value = newVal;
        if (newVal) {
            _background.value = false;
        }
    }, {immediate: true});


    // 获取当前页数据
    const UpdateDates = () => {
        emit('updateData', _currentPage.value, _pageSize.value);
    }

    // 监听组件挂载，获取数据总条数
    onMounted(()=>{
        // 获取当前页数据
        UpdateDates();
    });

    // 监听页码变化
    const currentChange = (currentPage: number) => {
        if (!update.value) return; // 停止调用 updateData 事件
        // 获取当前页数据
        emit('updateData', currentPage, _pageSize.value);
    };

    // 监听每页显示条数变化
    const sizeChange = (pageSize: number) => {
        if (!update.value) return; // 停止调用 updateData 事件
        // 获取当前页数据
        emit('updateData', _currentPage.value, pageSize);
    }
    
    // 监听数据总条数变化
    watch(() => props.total, (newVal) => {
        _total.value = newVal;
        if (!update.value) return; // 停止调用 updateData 事件
        // 获取当前页数据
        emit('updateData', _currentPage.value, _pageSize.value);
    });

    // 停止更新数据
    const StopUpdate = () => {
        update.value = false;
    }

    // 恢复更新数据
    const StartUpdate = () => {
        update.value = true;
        // 获取当前页数据
        emit('updateData', _currentPage.value, _pageSize.value);
    }

    const GetCurrentPage = (): number => { return _currentPage.value; }
    const GetPageSize = (): number => { return _pageSize.value; }
    const GetTotal = ():number => { return _total.value; }
    
    // 向父组件公开方法
    defineExpose({
        StopUpdate,     // 停止更新数据
        StartUpdate,    // 恢复更新数据
        GetCurrentPage, // 获取当前页
        GetPageSize,    // 获取每页显示条数
        GetTotal,       // 获取数据总条数
        UpdateDates      // 获取当前页数据
    });
</script>

<style scoped>
.pagination{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
/* 设置分页按钮背景颜色 */
.custom-pagination {
    --el-pagination-bg-color: rgba(0, 0, 0, 0);
    --el-pagination-button-disabled-bg-color: rgba(0, 0, 0, 0);
    --el-fill-color-blank: rgba(0, 0, 0, 0);
    --el-input-bg-color: rgba(0, 0, 0, 0);

    /* 设置禁用状态按钮文字颜色 */
    --el-pagination-button-disabled-color: rgba(0, 0, 0, .3);

    /* 设置分页按钮文字颜色 */
    --el-pagination-button-color: rgba(0, 0, 0, 1);
    --el-text-color-regular:var(--el-pagination-button-color);

    /* 设置分页输入框边框颜色 */
    --el-border-color-hover: rgba(0, 0, 0, .7);
    --el-border-color: rgba(0, 0, 0, .2);
}
</style>